<template>
  <!-- 绑定输入框到响应式变量 -->
  <input type="text" placeholder="请输入姓名" v-model="data.name">
  <input type="text" placeholder="请输入工资" v-model.number="data.salary">
  <input type="text" placeholder="请输入岗位" v-model="data.position">

  <!-- 点击添加员工 -->
  <button @click="addEmploy">添加员工</button><br>

  <hr>
  <table>
    <caption>员工列表</caption>
    <thead>
    <tr>
      <th>姓名</th>
      <th>工资</th>
      <th>岗位</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item, index) in employeeList" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.salary }}</td>
      <td>{{ item.position }}</td>
    </tr>
    </tbody>
  </table>
</template>

<script setup>
import { ref } from 'vue'

// 响应式变量：当前输入的员工信息
const data = ref({
  name: '',
  salary: 0,
  position: ''
})

// 存储所有员工
const employeeList = ref([])

// 添加员工方法
const addEmploy = () => {
  // 把当前输入的内容加入列表
  if (!data.value.name||!data.value.position){
    alert('请输入姓名或岗位')
    return
  }
  employeeList.value.push({ ...data.value })

  // 清空输入框
  data.value = {
    name: '',
    salary: 0,
    position: ''
  }
}
</script>
<style scoped>
table {
  width: 100%;
  border: #0aa1ed  1px solid;
  border-collapse: collapse;
}
</style>
